<template>
  <div class='table'>
    <h1>购物车</h1>
    <div class='flex'>
      <div><input type="checkbox" v-model="allClick">&nbsp;&nbsp;全选</div>
      <div>名称</div>
      <div>价格</div>
      <div>数量</div>
      <div>总价</div>
      <div>操作</div>
    </div>
    <Shopping
      v-for="item in list"
      :key='item.id'
      :id='item.id'
      :dname='item.dname'
      :price='item.price'
      :numbers='item.numbers'
      :clicked='item.clicked'
      @addPrice='addPrice'
      @redPrice='redPrice'
      @delChild='delChild'
    />
      <!-- @locCleck="fatherClice" -->
    <div class="total">
      <p>总价：{{sumTotal}}&nbsp;元</p>
    </div>
  </div>
</template>

<script>
import Shopping from './components/Shopping.vue'
export default {
  components: {
    Shopping
  },
  data(){
    return{
      list: [
        {
          id: '1',
          dname: '萝卜时蔬汤',
          price: 530,
          numbers: 1,
          clicked: {res:false},
        },
        {
          id: '2',
          dname: '烤羊排',
          price: 790,
          numbers: 1,
          clicked: {res:false}
        },
        {
          id: '3',
          dname: '珍珠翡翠白玉汤',
          price: 1775,
          numbers: 1,
          clicked: {res:false}
        },
        {
          id: '4',
          dname: '北地烟熏鸡',
          price: 1850,
          numbers: 1,
          clicked: {res:false}
        }
      ]
    }
  },
  methods:{
    // fatherClice(bul, id){
    //   this.list.forEach(item=>{
    //     if(item.id === id){
    //       item.clicked = bul
    //     }
    //   })
    // }
    // 删除商品
    delChild(id){
      // console.log(id);
      this.list = this.list.filter(item=> item.id != id)
    },
    // 减少数量
    redPrice(id){
      this.list.forEach(item=>{
        if(item.id===id){
          if(item.numbers >= 1){
            item.numbers--
          }
        }
      })
    },
    // 增加数量
    addPrice(id){
      this.list.forEach(item=>{
        if(item.id===id){
          item.numbers++
        }
      })
    }
  },
  computed:{
    // 总价
    sumTotal(){
      return this.list.reduce((sum,item)=>{
        if(item.clicked.res === true){
          return sum + item.price*item.numbers
        } else {
          return sum + 0
        }
      }, 0)
    },
    // 多选
    allClick: {
      get(){
        return this.list.every(item => item.clicked.res)
      },
      set(value){
        this.list.forEach(item => item.clicked.res = value)
      }
    }
  }
}
</script>

<style>
  body {
    background: wheat;
  }
  .table {
    width: 900px;
    margin: 20px auto 0;
    padding: 20px;
    border-radius: 20px;
    background-color: white;
  }
  h1 {
    margin: 0;
    padding-bottom: 20px;
    border-bottom: 4px solid #000;
    text-align: center;
  }
  .flex {
    display: flex;
    margin-top: 20px;
    padding: 20px;
    border-radius: 20px;
    background: wheat;
  }
  .flex div {
    text-align: center;
    flex: 1;
    border-left: 1px solid;
  }
  .flex div:nth-child(1) {
    border-left: none;
  }
  .total p {
    margin: 20px 0 0 20px ;
    font-size:1.3em;
    font-weight: 700;
  }
</style>